//在vue-cli中webpack的配置是默认隐藏起来 目的是为了让我们专注业务逻辑开发
//当我们需要优化发布时各个文件大小 优化项目加载速度 就需要显式调用webpack来进行配置  
const webpack = require('webpack')


module.exports = {
    //为项目指定不同模式下的入口 
    chainWebpack: config => {
        // 发布模式
        config.when(process.env.NODE_ENV === 'production', config => {
            config
                .entry('app')
                .clear()
                .add('./src/main-prod.js')

            //由于chunk-vendors会把所有的第三方插件合并在一起 导致体积过大
            //我们需要把这些第三方插件声明在externals中,这样它就不会去合并
            //而是去window全局对象中去查找 如下配置后 还需删除我们在项目中import  
            //的css文件 统一通过cdn形式配置在index.html中 注意在头部css放前头 js排在其后面
            //这样一来项目中那些import第三方插件 回去window全局对象中通过cdn去加载
            //自己的css、js文件   
            config.set('externals', {
                vue: 'Vue',
                'vue-router': 'VueRouter',
                axios: 'axios',
                lodash: '_',
                echarts: 'echarts',
                nprogress: 'NProgress',
                'vue-quill-editor': 'VueQuillEditor'
            })
            //定制配置首页内容  通过isProd来判断是否需要加载cdn和title名称
            //为true则加载 title名称不做改变 
            //这里配置后 还需在首页使用模板语法判断  
            config.plugin('html').tap(args => {
                args[0].isProd = true
                return args
            })
        })
        //开发模式
        config.when(process.env.NODE_ENV === 'development', config => {
            config
                .entry('app')
                .clear()
                .add('./src/main-dev.js')
            //isProd为false就需要改变Titel名称 而且不加载cdn
            config.plugin('html').tap(args => {
                args[0].isProd = false
                return args
            })
        })

    },

    // 暂时关闭eslint检查 太烦人了 
    // 连注释都要管
    //使用eslint就是为了统一团队的代码风格
    //减少一些低级的BUG  
    lintOnSave: false,

}
